<template>
  <div>
    <div class="search-box">
      <el-input
        id="search"
        v-model="searchKey"
        type="search"
        placeholder="请输入详细地址"
      />
      <!--<button @click="searchByHand">搜索</button>-->
      <div id="searchTip" class="tip-box" />
    </div>
    <div class="amap-box">
      <el-amap
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
        :events="events"
      >
        <!-- 标记 -->
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker"
        />
      </el-amap>
    </div>
  </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
const amapManager = new AMapManager();
export default {
  data() {
    const self = this;
    return {
      searchKey: null,
      amapManager,
      markers: [],
      zoom: 17,
      center: [121.329402, 31.228667],
      lng: 0,
      lat: 0,
      loaded: false,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initSearch();
          });
        },
        // 点击获取地址的数据
        click(e) {
          self.markers = [];
          const { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          self.center = [lng, lat];
          self.markers.push([lng, lat]);
          // 这里通过高德 SDK 完成。
          const geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          });
          geocoder.getAddress([lng, lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                self.searchKey = result.regeocode.formattedAddress;
                self.$emit('updateLocation', lng, lat, self.searchKey);
                self.$nextTick();
              }
            }
          });
        }
      },
      plugin: [
        {
          pName: 'Geolocation',
          events: {
            init(o) {
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  if (self.isEdit) {
                    // 设置经度
                    self.lng = self.longitude;
                    // 设置维度
                    self.lat = self.latitude;
                    // 设置坐标
                    self.center = [self.longitude, self.latitude];
                    self.markers.push([self.longitude, self.latitude]);
                  } else {
                    // 设置经度
                    self.lng = result.position.lng;
                    // 设置维度
                    self.lat = result.position.lat;
                    // 设置坐标
                    self.center = [self.lng, self.lat];
                    self.markers.push([self.lng, self.lat]);
                  }
                  // load
                  self.loaded = true;
                  // 页面渲染好后
                  self.$nextTick();
                }
              });
            }
          }
        }
      ]
    };
  },
  methods: {
    initSearch() {
      const vm = this;
      const AMapUI = window.AMapUI;
      const map = this.amapManager.getMap();
      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        console.log(PoiPicker, 'PoiPicker');
        const poiPicker = new PoiPicker({
          input: 'search',
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          suggestContainer: 'searchTip',
          searchResultsContainer: 'searchTip'
        });
        vm.poiPicker = poiPicker;
        // 监听poi选中信息
        poiPicker.on('poiPicked', function(poiResult) {
          console.log(poiResult, 'poiResult');
          const source = poiResult.source;
          const poi = poiResult.item;
          if (source !== 'search') {
            poiPicker.searchByKeyword(poi.name);
          } else {
            poiPicker.clearSearchResults();
            vm.markers = [];
            const lng = poi.location.lng;
            const lat = poi.location.lat;
            const address = poi.name; // poi.cityname + poi.adname + poi.name
            vm.center = [lng, lat];
            vm.markers.push([lng, lat]);
            vm.lng = lng;
            vm.lat = lat;
            vm.address = address;
            vm.searchKey = address;
            vm.$emit('updateLocation', lng, lat, vm.searchKey);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.amap-box {
  height: 200px;
}
</style>
